<template>
  <u-popup :show="popUpShow" :round="10" mode="bottom" @close="popUpClose">
    <view class="popUpInside">
      <u--form>
        <!-- 当传递过来的参数为userControl时，显示查询 用户信息 的弹出层 -->
        <view v-if="this.popUpType == 'userControl'">
          <view class="inpInfoBox">
            <view class="text">
              <text>用户名称：</text>
            </view>
            <u--input placeholder="请输入要查询的用户名" border="surround" v-model="queryParams.userName" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>手机号码：</text>
            </view>
            <u--input placeholder="请输入手机号码" border="surround" type="number" v-model="queryParams.phonenumber"
              clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>状态：</text>
            </view>
            <u-radio-group v-model="queryParams.status">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in statusRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>创建时间：</text>
            </view>
            <u-cell :label="`${this.dateRange && this.dateRange.length > 0
              ? this.dateRange[0]
              : '开始时间'
              } ~ ${this.dateRange && this.dateRange.length > 1
                ? this.dateRange[1]
                : '结束时间'
              }`" value="请选择" isLink @click="openCalendar" show="true">
            </u-cell>
            <u-calendar :maxDate="maxDate" :show="calendarShow" mode="range" @confirm="confirm" @close="closeCalendar"
              :closeOnClickOverlay="true"></u-calendar>
          </view>
        </view>

        <!-- 当传递过来的参数为roleControl时，显示查询 角色信息 的弹出层 -->
        <view v-if="this.popUpType == 'roleControl'">
          <view class="inpInfoBox">
            <view class="text">
              <text>角色名称：</text>
            </view>
            <u--input placeholder="请输入要查询的角色名" border="surround" v-model="queryParams.roleName" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>权限字符：</text>
            </view>
            <u--input placeholder="请输入要查询的权限字符" border="surround" v-model="queryParams.roleKey" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>状态：</text>
            </view>
            <u-radio-group v-model="queryParams.status">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in statusRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>创建时间：</text>
            </view>
            <u-cell :label="`${this.dateRange && this.dateRange.length > 0
              ? this.dateRange[0]
              : '开始时间'
              } ~ ${this.dateRange && this.dateRange.length > 1
                ? this.dateRange[1]
                : '结束时间'
              }`" value="请选择" isLink @click="openCalendar" show="true">
            </u-cell>
            <u-calendar :maxDate="maxDate" :show="calendarShow" mode="range" @confirm="confirm" @close="closeCalendar"
              :closeOnClickOverlay="true"></u-calendar>
          </view>
        </view>

        <!-- 当传递过来的参数为postControl时，显示查询 岗位信息 的弹出层 -->
        <view v-if="this.popUpType == 'postControl'">
          <view class="inpInfoBox">
            <view class="text">
              <text>岗位编码：</text>
            </view>
            <u--input placeholder="请输入要查询的岗位编码" border="surround" v-model="queryParams.postCode" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>岗位名称：</text>
            </view>
            <u--input placeholder="请输入要查询的岗位名称" border="surround" v-model="queryParams.postName" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>状态：</text>
            </view>
            <u-radio-group v-model="queryParams.status">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in statusRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>

        <!-- 当传递过来的参数为dictControl时，显示查询 字典信息 的弹出层 -->
        <view v-if="this.popUpType == 'dictControl'">
          <view class="inpInfoBox">
            <view class="text">
              <text>字典名称：</text>
            </view>
            <u--input placeholder="请输入要查询的字典名称" border="surround" v-model="queryParams.dictName" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>字典类型：</text>
            </view>
            <u--input placeholder="请输入要查询的字典类型" border="surround" v-model="queryParams.dictType" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>状态：</text>
            </view>
            <u-radio-group v-model="queryParams.status">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in statusRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>创建时间：</text>
            </view>
            <u-cell :label="`${this.dateRange && this.dateRange.length > 0
              ? this.dateRange[0]
              : '开始时间'
              } ~ ${this.dateRange && this.dateRange.length > 1
                ? this.dateRange[1]
                : '结束时间'
              }`" value="请选择" isLink @click="openCalendar" show="true">
            </u-cell>
            <u-calendar :maxDate="maxDate" :show="calendarShow" mode="range" @confirm="confirm" @close="closeCalendar"
              :closeOnClickOverlay="true"></u-calendar>
          </view>
        </view>

        <!-- 当传递过来的参数为Config时，显示查询 参数信息 的弹出层 -->
        <view v-if="this.popUpType == 'Config'">
          <view class="inpInfoBox">
            <view class="text">
              <text>参数名称：</text>
            </view>
            <u--input placeholder="请输入要查询的参数名称" border="surround" v-model="queryParams.configName" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>参数键名：</text>
            </view>
            <u--input placeholder="请输入要查询的参数键名" border="surround" v-model="queryParams.configKey" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>系统内置：</text>
            </view>
            <u-radio-group v-model="queryParams.configType">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in systemRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>创建时间：</text>
            </view>
            <u-cell :label="`${this.dateRange && this.dateRange.length > 0
              ? this.dateRange[0]
              : '开始时间'
              } ~ ${this.dateRange && this.dateRange.length > 1
                ? this.dateRange[1]
                : '结束时间'
              }`" value="请选择" isLink @click="openCalendar" show="true">
            </u-cell>
            <u-calendar :maxDate="maxDate" :show="calendarShow" mode="range" @confirm="confirm" @close="closeCalendar"
              :closeOnClickOverlay="true"></u-calendar>
          </view>
        </view>

        <!-- 当传递过来的参数为Notice时，显示查询 参数信息 的弹出层 -->
        <view v-if="this.popUpType == 'Notice'">
          <view class="inpInfoBox">
            <view class="text">
              <text>公告标题：</text>
            </view>
            <u--input placeholder="请输入要查询的岗位编码" border="surround" v-model="queryParams.noticeTitle" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>操作人员：</text>
            </view>
            <u--input placeholder="请输入要查询的岗位名称" border="surround" v-model="queryParams.createBy" clearable></u--input>
          </view>
          <view class="inpInfoBox">
            <view class="text">
              <text>类型：</text>
            </view>
            <u-radio-group v-model="queryParams.noticeType">
              <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in typeRadioList" :key="index"
                :name="item.name" @change="radioChange">{{ item.showName }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>

        <!-- 表单共用按钮 -->
        <view class="btns">
          <view class="submitBotton">
            <u-button type="primary" text="查询" :plain="false" @click="handleQuery"></u-button>
          </view>
          <view class="resetBotton">
            <u-button text="重置" type="error" :plain="false" @click="reset"></u-button>
          </view>
        </view>
      </u--form>
    </view>
  </u-popup>
</template>
<script>
import { listUser } from "@/api/system/user";
import { listRole } from "@/api/system/role";
import { listPost } from "@/api/system/post";
import { listType, getType, delType, addType, updateType } from "@/api/system/dict/type";
import { listConfig, getConfig, delConfig, addConfig, updateConfig } from "@/api/system/config";
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
import { addDateRange } from "@/utils/ruoyi";
import { mapMutations } from "vuex";
// 获取日期
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate();
export default {
  // 获取添加用户按钮标题名称
  props: {
    popUpType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 用户初始值
      userList: null,
      // 日期选择是否显示
      calendarShow: false,
      // 日期选择范围
      maxDate: `${year + 1}-${month}-${date}`,
      // 单选-状态数据
      statusRadioList: this.$store.getters.statusRadioList,
      // 单选-系统内置数据
      systemRadioList: this.$store.getters.systemRadioList,
      // 单选-类型数据
      typeRadioList: this.$store.getters.typeRadioList,
      // 查询日期范围
      dateRange: this.$store.getters.dateRange,
      // 请求列表
      totalList: this.$store.getters.totalList,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 用户模块查询条件
        userName: undefined,
        phonenumber: undefined,
        status: 0,
        // 角色模块查询条件
        roleName: undefined,
        roleKey: undefined,
        // 岗位模块查询条件
        postName: undefined,
        postCode: undefined,
        // 字典模块查询条件
        dictName: undefined,
        dictType: undefined,
        // 参数模块查询条件
        configName: undefined,
        configKey: undefined,
        configType: undefined,
        // 公告通知查询条件
        noticeTitle: undefined,
        createBy: undefined,
        noticeType: undefined,
      },
    };
  },
  methods: {
    //
    ...mapMutations(["popupState"]),
    /** 打开日历 */
    openCalendar() {
      this.calendarShow = true;
    },
    /** 选择日期处理 */
    confirm(event) {
      this.dateRange.push(event[0]);
      this.dateRange.push(event[event.length - 1]);
      this.calendarShow = false;
    },
    closeCalendar() {
      this.calendarShow = false;
    },
    /** 关闭弹出层 */
    popUpClose() {
      this.popupState(false);
    },
    /** 搜索按钮操作 */
    async handleQuery() {
      this.queryParams.pageNum = 1;
      this.popupState(false);
      await this.getList();
      this.$store.commit("syncGetList", this.totalList);
      this.reset()
    },
    /** 筛选列表 */
    async getList() {
      let response;

      if (this.popUpType == 'userControl') {
        // 用户检索
        response = await listUser(addDateRange(this.queryParams, this.dateRange));
      } else if (this.popUpType == 'roleControl') {
        // 角色检索
        response = await listRole(addDateRange(this.queryParams, this.dateRange));
      } else if (this.popUpType == 'postControl') {
        // 岗位检索
        response = await listPost(addDateRange(this.queryParams));
      } else if (this.popUpType == 'dictControl') {
        // 字典检索
        response = await listType(addDateRange(this.queryParams, this.dateRange));
      } else if (this.popUpType == 'Config') {
        // 参数检索
        response = await listConfig(addDateRange(this.queryParams, this.dateRange));
      } else if (this.popUpType == 'Notice') {
        // 公告检索
        response = await listNotice(addDateRange(this.queryParams));
      }

      this.userList = response.rows;
      this.total = response.total;
      if (this.queryParams.pageNum == 1) {
        this.totalList = this.userList;
        this.queryParams.pageNum++;
      }
    },
    /** 重置查询 */
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        // 角色模块查询条件
        roleName: undefined,
        roleKey: undefined,
        // 岗位模块查询条件
        postName: undefined,
        postCode: undefined,
        // 字典模块查询条件
        dictName: undefined,
        dictType: undefined,
        // 参数模块查询条件
        configName: undefined,
        configKey: undefined,
        configType: undefined,
        // 公告模块查询条件
        noticeTitle: undefined,
        createBy: undefined,
        noticeType: undefined,
      };
      this.dateRange = [];
    },
    /** 获取选中状态,修改查询条件中"状态"值 */
    radioChange(name) {
      this.queryParams.status = name
    },
  },
  computed: {
    // 弹出层是否显示
    popUpShow() {
      return this.$store.getters.popUpShow;
    },
  },
};
</script>
<style lang="scss">
@import "../../yangLaoAppStyle.scss";
</style>
